<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-23 17:09:24
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\xu\xu.vue
-->
<template>
    <div class="w-100 h-100">
    <containTemplete
     :title="'畜-水资源循环,转化利用'" 
     :secondTitles="['人工蓄水城市覆盖率','人工蓄水体积统计','自然水系蓄水']"
     :slotWidth="[36,36,28]"

     >
        <template #left>
            <xu1
            :selectValue="left_value"
            :allData="allData"
            ></xu1>
        </template>
        <template #middle>
          <xu2
           :echartsData="echartsData"
           v-if="echartsData.length>0"
          ></xu2>
        </template>
        <template #right>
         <xu3
         :echartsData="echartsDataxu3"
         v-if="echartsDataxu3"

         ></xu3>
        </template>
        <template #left_control>
            <proSelect
            :optionsData="useOptions().year()"
            :defaultSelectValue="new Date().getFullYear()-1"
             v-model:select-value="left_value"
            :width="150"
            > </proSelect>
        </template>
    </containTemplete>
    </div>
</template>

<script setup lang='ts'>
import containTemplete from '@/components/project/containTemplete.vue';
import { useOptions } from '@/hook/useOptions';
import pie_table from '@/components/project/pie_table.vue';
import xu1 from './xu1.vue'
import xu2 from './xu2.vue'
import xu3 from './xu3.vue'
import twoMessage from "@/components/project/twoMessage.vue";
const left_value=ref()
const jsonData: any = inject("jsonData");
const allData=ref()
const echartsData=ref([])
const echartsDataxu3=ref()
watch(
    () => jsonData.value,
    (newValue:any, oldValue) => {
      if (newValue) {
        allData.value = newValue.jsc.rgxscsfgl
        echartsData.value = newValue.jsc.rgxstitj
        echartsDataxu3.value = newValue.jsc.zrsxxs
      }
    }
);
</script>

<style scoped lang="less" >

</style>